import React from 'react';
import { default as Navbar, NavItem } from '../components/NavbarFix';
import Card from '../components/Card';
import Button from '../components/Button';
import { Globe, Map, BookOpen, Settings, User, ChevronRight, MessageCircle, Compass, Download } from 'lucide-react';
import '@/pages/HomePage.css';
// 使用Vite别名路径

const HomePage: React.FC = () => {
  // 导航项配置
  const navItems: NavItem[] = [
    {
      id: 'home',
      label: '首页',
      icon: <Compass size={20} />,
      path: '/'
    },
    {
      id: 'translation',
      label: '翻译',
      icon: <MessageCircle size={20} />,
      path: '/translation'
    },
    {
      id: 'map',
      label: '地图',
      icon: <Map size={20} />,
      path: '/map'
    },
    {
      id: 'offline',
      label: '离线内容',
      icon: <Download size={20} />,
      path: '/offline-content'
    },
    {
      id: 'settings',
      label: '设置',
      icon: <Settings size={20} />,
      path: '/settings'
    },
    {
      id: 'profile',
      label: '个人资料',
      icon: <User size={20} />,
      path: '/profile'
    },
    {
      id: 'guide',
      label: '旅行指南',
      icon: <BookOpen size={20} />,
      path: '/guide'
    }
  ];

  // 功能卡片数据
  const features = [
    {
      id: 'feature1',
      title: '实时翻译',
      description: '支持文本、语音和图片翻译，覆盖多种语言',
      icon: <MessageCircle size={32} className="text-blue-500" />,
      buttonText: '开始翻译',
      path: '/translation'
    },
    {
      id: 'feature2',
      title: '旅行地图',
      description: '探索目的地，获取景点信息和导航路线',
      icon: <Map size={32} className="text-green-500" />,
      buttonText: '查看地图',
      path: '/map'
    },
    {
      id: 'feature3',
      title: '离线内容',
      description: '下载语言包和地图，无网络也能使用',
      icon: <Download size={32} className="text-orange-500" />,
      buttonText: '下载内容',
      path: '/offline-content'
    },
    {
      id: 'feature4',
      title: '旅行指南',
      description: '获取目的地文化、习俗和旅行贴士',
      icon: <BookOpen size={32} className="text-purple-500" />,
      buttonText: '查看指南',
      path: '/guide'
    }
  ];

  // 推荐目的地
  const destinations = [
    {
      id: 'dest1',
      name: '东京',
      country: '日本',
      imageUrl: 'https://images.unsplash.com/photo-1493976040374-85c8e12f0c0e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8dG9reW98ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
    },
    {
      id: 'dest2',
      name: '巴黎',
      country: '法国',
      imageUrl: 'https://images.unsplash.com/photo-1496442226666-8d4d0e62e6e9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8cGFyaXN8ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=500&q=60'
    },
    {
      id: 'dest3',
      name: '纽约',
      country: '美国',
      imageUrl: 'https://images.unsplash.com/photo-1502602898657-3e91760cbb34?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8bmV3JTIweW9ya3xlbnwwfHwwfHx8MA%3D%3D&auto=format&fit=crop&w=500&q=60'
    }
  ];

  return (
    <div className="home-page min-h-screen bg-gray-50 pt-16">
      {/* 导航栏 */}
      <div className="bg-red-500 p-1 fixed top-0 left-0 right-0 z-500"><Navbar items={navItems} /></div>

      {/* 英雄区域 */}
      <section className="hero bg-gradient-to-r from-blue-600 to-blue-500 text-white py-16 md:py-24">
        <div className="container mx-auto px-4 text-center">
          <h1 className="text-3xl md:text-4xl lg:text-5xl font-bold mb-4">多语言旅行助手</h1>
          <p className="text-lg md:text-xl max-w-3xl mx-auto mb-8 opacity-90">
            无论您去哪里旅行，我们都能帮助您克服语言障碍，探索世界各地的文化和景点
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button size="large" variant="primary" className="w-full sm:w-auto bg-white text-blue-600 hover:bg-blue-50">
              开始使用
            </Button>
            <Button size="large" variant="secondary" className="w-full sm:w-auto text-white bg-gray-800 border-gray-600 hover:bg-gray-700">
              了解更多
            </Button>
          </div>
        </div>
      </section>

      {/* 功能区域 */}
      <section className="features py-16 bg-white">
        <div className="container mx-auto px-4">
          <h2 className="text-2xl md:text-3xl font-bold text-center mb-12 text-gray-800">核心功能</h2>
          <div className="feature-grid grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
            {features.map((feature) => (
              <Card key={feature.id} shadow="md" rounded="lg" className="p-6 h-full flex flex-col">
                <div className="mb-4">{feature.icon}</div>
                <h3 className="text-xl font-semibold mb-2 text-gray-800">{feature.title}</h3>
                <p className="text-gray-600 mb-6 flex-grow">{feature.description}</p>
                <Button variant="primary" className="w-full">
                  {feature.buttonText} <ChevronRight size={16} className="ml-1" />
                </Button>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 推荐目的地 */}
      <section className="destinations py-16 bg-gray-50">
        <div className="container mx-auto px-4">
          <div className="flex justify-between items-center mb-8">
            <h2 className="text-2xl md:text-3xl font-bold text-gray-800">推荐目的地</h2>
            <Button variant="secondary">
              查看全部 <ChevronRight size={16} className="ml-1" />
            </Button>
          </div>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            {destinations.map((dest) => (
              <Card key={dest.id} shadow="md" rounded="lg" className="overflow-hidden">
                <div className="h-48 bg-gray-200 overflow-hidden">
                  <img src={dest.imageUrl} alt={dest.name} className="w-full h-full object-cover transition-transform duration-300 hover:scale-105" />
                </div>
                <div className="p-6">
                  <h3 className="text-xl font-semibold text-gray-800 mb-1">{dest.name}</h3>
                  <p className="text-gray-600 mb-4">{dest.country}</p>
                  <Button variant="primary" className="w-full">
                    探索 <Compass size={16} className="ml-1" />
                  </Button>
                </div>
              </Card>
            ))}
          </div>
        </div>
      </section>

      {/* 下载区域 */}
      <section className="download py-16 bg-blue-600 text-white">
        <div className="container mx-auto px-4 text-center">
          <h2 className="text-2xl md:text-3xl font-bold mb-4">随时随地使用</h2>
          <p className="text-lg max-w-2xl mx-auto mb-8 opacity-90">
            下载我们的应用，离线也能使用全部功能，让您的旅行更加便捷
          </p>
          <div className="flex flex-col sm:flex-row justify-center gap-4">
            <Button size="large" variant="secondary" className="flex items-center justify-center gap-2 w-full sm:w-auto text-white bg-gray-800 border-gray-600 hover:bg-gray-700">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><rect x="2" y="3" width="20" height="14" rx="2" ry="2"></rect><line x1="12" y1="17" x2="12" y2="17"></line><line x1="8" y1="21" x2="16" y2="21"></line></svg>
              App Store
            </Button>
            <Button size="large" variant="secondary" className="flex items-center justify-center gap-2 w-full sm:w-auto text-white bg-gray-800 border-gray-600 hover:bg-gray-700">
              <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"><path d="M17 2h-10a2 2 0 0 0-2 2v18a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-14"></path><path d="M14 2v4h-4V2"></path><path d="M16 10v8h-8v-8"></path><path d="M9 14h6"></path><path d="M9 10h6"></path></svg>
              Google Play
            </Button>
          </div>
        </div>
      </section>

      {/* 页脚 */}
      <footer className="footer bg-gray-800 text-white py-12">
        <div className="container mx-auto px-4">
          <div className="grid grid-cols-1 md:grid-cols-4 gap-8">
            <div>
              <h3 className="text-xl font-bold mb-4">多语言旅行助手</h3>
              <p className="text-gray-400">让旅行无国界，沟通无障碍</p>
            </div>
            <div>
              <h4 className="font-semibold mb-4">功能</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">翻译</a></li>
                <li><a href="#" className="hover:text-white transition-colors">地图</a></li>
                <li><a href="#" className="hover:text-white transition-colors">离线内容</a></li>
                <li><a href="#" className="hover:text-white transition-colors">旅行指南</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">关于我们</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">公司介绍</a></li>
                <li><a href="#" className="hover:text-white transition-colors">团队</a></li>
                <li><a href="#" className="hover:text-white transition-colors">联系我们</a></li>
                <li><a href="#" className="hover:text-white transition-colors">加入我们</a></li>
              </ul>
            </div>
            <div>
              <h4 className="font-semibold mb-4">法律</h4>
              <ul className="space-y-2 text-gray-400">
                <li><a href="#" className="hover:text-white transition-colors">隐私政策</a></li>
                <li><a href="#" className="hover:text-white transition-colors">服务条款</a></li>
                <li><a href="#" className="hover:text-white transition-colors">Cookie政策</a></li>
              </ul>
            </div>
          </div>
          <div className="border-t border-gray-700 mt-8 pt-8 text-center text-gray-400">
            <p>&copy; {new Date().getFullYear()} 多语言旅行助手. 保留所有权利.</p>
          </div>
        </div>
      </footer>
    </div>
  );
};

export default HomePage;